<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>厂区示意图</title>
    <style>
        html,body {
            padding: 0;
            margin: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }

        .label {
            transform: translate(-50%, -50%);
        }
    </style>
    <script src="dist/city3d.js"></script>
    
</head>
<body>
    <div id="container" style="width: 100%;height: 100%;"></div>
    <script>
        var city = new City3D({
  container: '#container',
});
city.init();
city.setBuildings([{
  "name": "涂装车间",
  "left": 25,
  "top": 25,
  "width": 100,
  "height": 500,
  "level": 2
},
{
  "name": "酸洗车间",
  "left": 25,
  "top": 600,
  "width": 100,
  "height": 200,
  "level": 3
},
{
  "name": "废水处理区",
  "left": 25,
  "top": 850,
  "width": 100,
  "height": 100
},
{
  "name": "镏焊车间（一）",
  "left": 150,
  "top": 25,
  "width": 500,
  "height": 100
},
{
  "name": "镏焊车间（二）",
  "left": 150,
  "top": 180,
  "width": 500,
  "height": 100
},
{
  "name": "综合车间",
  "left": 150,
  "top": 340,
  "width": 500,
  "height": 100
},
{
  "name": "管道车间（一）",
  "left": 150,
  "top": 500,
  "width": 500,
  "height": 100
},
{
  "name": "管道车间（二）",
  "left": 150,
  "top": 660,
  "width": 500,
  "height": 100
},
{
  "name": "仓库",
  "left": 150,
  "top": 820,
  "width": 500,
  "height": 150
},
{
  "name": "办公区",
  "left": 700,
  "top": 25,
  "width": 250,
  "height": 450
},
{
  "name": "焊工培训区",
  "left": 700,
  "top": 525,
  "width": 250,
  "height": 450
}]);

city.render();


    </script>
</body>
</html>